<script setup lang="ts">
import Lock from "@iconify-icons/ri/lock-fill";
import { useUserCenterInfo } from "./utils/hook";
import { useRenderIcon } from "@/components/ReIcon/src/hooks";
defineOptions({
  name: "ChangePassword"
});

const { users, rules, ruleFormRef, update } = useUserCenterInfo();
</script>

<template>
  <div>
    <el-card style="width: 70%">
      <el-form ref="ruleFormRef" :model="users" :rules="rules">
        <el-form-item label="输入新密码:" prop="newpass">
          <el-input
            clearable
            show-password
            v-model="users.newpass"
            placeholder="输入新密码"
            :prefix-icon="useRenderIcon(Lock)"
          />
        </el-form-item>
        <el-form-item label="请确认密码:" prop="okpassword">
          <el-input
            v-model="users.okpassword"
            placeholder="确认密码"
            clearable
            show-password
            :prefix-icon="useRenderIcon(Lock)"
          />
        </el-form-item>
        <el-button type="primary" @click="update(ruleFormRef)"
          >确认修改</el-button
        >
      </el-form>
    </el-card>
  </div>
</template>
